<template>
  <div class="menu-config-container">
    <div class="page-title-container flex" title="查看">
      <a-button type="default" @click="back()">返回 </a-button>
    </div>
    <div class="page-body-container">
      <a-collapse v-model="activeKey">
        <!-- 基本信息 -->
        <a-collapse-panel key="1" :show-arrow="false" title="基本信息">
          <template slot="header">
            <div class="collapse-custom-header">
              {{ activeKey.includes("1") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('1') && 'active']">
                <bj-icon-font
                  type="xl"
                  color="#0068B7"
                  :size="10"
                ></bj-icon-font>
              </div>
            </div>
          </template>
          <div class="base-info-container">
            <a-form-model ref="ruleForm" :model="baseInfo">
              <a-row>
                <!-- 租户编码 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="租户编码">
                    <a-input v-model="baseInfo.tenantCode" disabled />
                  </a-form-model-item>
                </a-col>
                <!-- 租户名称 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="租户名称">
                    <a-input disabled v-model="baseInfo.tenantName" />
                  </a-form-model-item>
                </a-col>
                <!-- 租户类型 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="租户类型">
                    <a-input disabled v-model="baseInfo.tenantTypeDesc" />
                  </a-form-model-item>
                </a-col>
                <!-- 租户超管账号 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="租户超管账号">
                    <a-input
                      disabled
                      v-model="baseInfo.tenantSuperAccountDesc"
                    />
                  </a-form-model-item>
                </a-col>

                <!-- 创建人 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="创建人">
                    <a-input disabled v-model="baseInfo.updateName" />
                  </a-form-model-item>
                </a-col>
                <!-- 更新时间 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="更新时间">
                    <a-input disabled v-model="baseInfo.updateTimeStr" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
        </a-collapse-panel>

        <!-- 菜单配置信息-->
        <a-collapse-panel key="3" :show-arrow="false" title="菜单配置信息">
          <template slot="header">
            <div class="collapse-custom-header">
              {{ activeKey.includes("3") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('3') && 'active']">
                <bj-icon-font
                  type="xl"
                  color="#0068B7"
                  :size="10"
                ></bj-icon-font>
              </div>
            </div>
          </template>
          <div class="user-config-container">
            <div class="condition-container">
              <!-- 菜单名称 -->
              <a-input v-model="menuName" placeholder="请输入菜单名称" />
              <!-- 菜单类型 -->
              <a-select
                v-model="menuTypeValue"
                placeholder="请选择菜单类型"
                :loading="menuTypeLoading"
                allowClear
                @change="getTableData"
              >
                <a-select-option
                  :value="item.dicValue"
                  v-for="(item, index) in menuTypeSource"
                  :key="index"
                >
                  {{ item.dicDesc }}
                </a-select-option>
              </a-select>
              <a-button type="primary" @click="getTableData"> 查询 </a-button>
            </div>
            <div class="table-container" v-loading="loading">
              <vxe-table
                show-overflow
                show-header-overflow
                show-footer-overflow
                show-footer
                height="480px"
                class="scrollbarStyle"
                align="center"
                :data="table.source"
                :column-config="{ resizable: true }"
                ref="xTable"
                :tree-config="{
                  rowField: 'id',
                  parentField: 'parentId',
                  children: 'childs',
                }"
              >
                <vxe-column
                  :title="item.title"
                  :field="item.key"
                  :key="index"
                  :min-width="item.width"
                  show-overflow
                  :tree-node="item.treeNode"
                  v-for="(item, index) in table.columns"
                  :align="item.align || 'center'"
                  header-align="center"
                >
                </vxe-column>
                <!-- 操作 -->
                <vxe-column title="操作" width="160" fixed="right">
                  <template #default="{ row }">
                    <div class="text-button-group">
                      <a-button type="link" @click="gotoDetail(row)">
                        查看
                      </a-button>
                    </div>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <!-- 目录详情 -->
    <addDirectoryModal
      :visible.sync="addDirectoryModalVisible"
      :model="model"
    ></addDirectoryModal>
    <!-- 子节点目录详情 -->
    <addChildrenNodeModal
      :visible.sync="addChildrenNodeModalVisible"
      :model="model"
    ></addChildrenNodeModal>
    <!-- 子节点菜单详情 -->
    <editChildrenNodeModal
      :visible.sync="editChildrenNodeModalVisible"
      :model="model"
    ></editChildrenNodeModal>
  </div>
</template>

<script>
//【详情】
//目录详情
import addDirectoryModal from "./components/addDirectoryModal";
//子节点目录详情
import addChildrenNodeModal from "./components/addChildrenNodeModal";
//子节点菜单详情
import editChildrenNodeModal from "./components/editChildrenNodeModal";
import {
  getTenantDetails,
  getTenantPermissionList,
} from "@/api/user-center/tenantManage.js";
import { getDictList } from "@/api/user-center/organizationManage.js";
import { getNodeByKey } from "@/utils";
export default {
  components: {
    addDirectoryModal,
    addChildrenNodeModal,
    editChildrenNodeModal,
  },
  data() {
    return {
      loading: false,
      //目录详情
      addDirectoryModalVisible: false,
      //子节点目录详情
      addChildrenNodeModalVisible: false,
      //子节点菜单详情
      editChildrenNodeModalVisible: false,
      //
      activeKey: ["1", "2", "3", "4", "5"],
      //基本信息
      baseInfo: {
        //租户名称
        tenantName: "",
        //租户编码
        tenantCode: "",
        //租户类型
        tenantTypeDesc: "",
        //超管账号
        tenantSuperAccountDesc: "",
        //创建人
        updateName: "",
        //更新时间
        updateTimeStr: "",
      },
      //菜单名称
      menuName: undefined,
      //菜单类型
      menuTypeValue: undefined,
      //table
      table: {
        source: [],
        columns: [
          {
            title: "菜单名称",
            dataIndex: "menuName",
            key: "menuName",
            width: "",
            treeNode: true,
            align: "left",
          },
          {
            title: "菜单类型",
            dataIndex: "menuTypeDesc",
            key: "menuTypeDesc",
            width: "",
          },
          {
            title: "是否外链",
            dataIndex: "isFrame",
            key: "isFrame",
            width: "",
          },
          {
            title: "pc路由地址",
            dataIndex: "path",
            key: "path",
            width: "",
          },
          {
            title: "app路由地址",
            dataIndex: "appPath",
            key: "appPath",
            width: "",
          },
          {
            title: "应用标识",
            dataIndex: "activeRule",
            key: "activeRule",
            width: "",
          },
          {
            title: "打开类型",
            dataIndex: "openType",
            key: "openType",
            width: "",
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            key: "createTime",
            width: "",
          },
        ],
      },
      //类型
      menuTypeLoading: false,
      menuTypeSource: [],
      //组件传参
      model: {
        id: "",
        text: "",
        parentId: "",
        superiorML: "",
      },
    };
  },
  mounted() {
    this.getDetail();
    this.getMenuTypeList();
    this.getTableData();
  },
  methods: {
    //查询菜单类型
    getMenuTypeList() {
      this.menuTypeLoading = true;
      getDictList({ dictKey: "menuType" })
        .then((res) => {
          let { data } = res;
          this.menuTypeSource = data.result || [];
        })
        .catch((_) => {
          this.menuTypeSource = [];
        })
        .finally((_) => {
          this.menuTypeLoading = false;
        });
    },
    //详情
    getDetail() {
      let { id } = this.$route.query;
      getTenantDetails(id)
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.baseInfo = {
            //租户名称
            tenantName: result.tenantName,
            //租户编码
            tenantCode: result.tenantCode,
            //租户类型
            tenantTypeDesc: result.tenantTypeDesc,
            //超管账号
            tenantSuperAccountDesc: result.tenantSuperAccountDesc,
            //创建人
            updateName: result.updateName,
            //更新时间
            updateTimeStr: result.updateTimeStr,
          };
        })
        .catch((_) => {})
        .finally((_) => {});
    },
    //查询列表
    getTableData() {
      this.loading = true;
      let { tenantCode } = this.$route.query;
      let { menuName, menuTypeValue } = this;
      return new Promise((resolve, reject) => {
        getTenantPermissionList({
          tenantCode,
          menuName,
          menuTypeValue: menuTypeValue ? menuTypeValue : "",
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.table.source = result;
            resolve();
          })
          .catch((_) => {
            this.table.source = [];
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },
    //详情
    gotoDetail(row) {
      this.model.id = row.id;
      this.model.text = "查看";
      if (row.parentId) {
        if (row.menuTypeValue == 1) {
          this.addChildrenNodeModalVisible = true;
        } else {
          let parentData = getNodeByKey(row.parentId, "id", this.table.source);
          this.model.superiorML = parentData?.menuName || "";
          this.editChildrenNodeModalVisible = true;
        }
      } else {
        this.addDirectoryModalVisible = true;
      }
    },
    //返回
    back() {
      this.$router.push({
        path: `/nebula/user-app/tenantManage`,
      });
    },
  },
};
</script>

<style lang="less">
.menu-config-container {
  height: 100%;
  .flex();
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  .page-title-container {
    height: 46px;
    background: #ffffff;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #e8ebf0;
    &::before {
      .flex();
      align-items: center;
      content: attr(title);
      font-size: 16px;
      height: 16px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
    }
  }
  .page-body-container {
    flex: 1;
    flex-wrap: wrap;
    background: #fff;
    .custom-scrollbar();
    .ant-collapse {
      border-radius: 0;
      border: none;
      background: #fff;
      .ant-collapse-item {
        display: flex;
        flex-direction: column;
        position: relative;
        border: none;
        border-bottom: 1px solid #e8ebf0;
        &::before {
          position: absolute;
          left: 30px;
          top: 20px;
          content: attr(title);
          font-size: 14px;
          color: #525a5d;
        }
        .ant-collapse-content-box {
          padding: 0;
        }
        .ant-collapse-header {
          padding: 0;
          margin-left: auto;
          margin-right: 30px;
          border-radius: 0;
          height: 60px;
          .flex();
          align-items: center;
          .collapse-custom-header {
            color: var(--primary-color);
            .flex();
            .icon {
              transform: scale(0.75);
              margin-left: 4px;
              transition: 0.3s;
              &.active {
                transform: scale(0.75) rotate(180deg);
              }
            }
          }
        }
        .ant-collapse-content {
          border: none;
        }
      }
    }
    .condition-container {
      flex-shrink: 0;
      .flex();
      padding: 0 30px 20px 30px;
      .ant-select {
        width: 160px;
        margin-left: 16px;
      }
      .ant-input {
        width: 160px;
      }
      button {
        margin-left: 16px;
      }
    }
    //基本信息
    .base-info-container {
      padding: 0 80px 10px 20px;
      .ant-form-item {
        .flex();
        .ant-form-item-label {
          width: 130px;
          flex-shrink: 0;
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          textarea {
            height: 80px;
          }
          .ant-calendar-picker {
            width: 100%;
          }
        }
      }
    }
    //用户配置信息
    .user-config-container {
      .flex();
      flex-direction: column;
      .table-container {
        flex: 1;
        .status-text {
          border-radius: 4px;
          color: #fff;
          width: 68px;
          .flex();
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          font-size: 12px;
          &.normal {
            background: #4bc964;
          }
          &.lock {
            background: #ff3f4a;
          }
          &.cancel {
            background: #f1f2f7;
            color: #aab0bc;
          }
          &.no-activate {
            background: #0098ff;
          }
        }
      }
    }
  }
}
</style>
